<template>
	<view>
		<checkbox-group class="block" @change="CheckboxChange">
			<view class="menus" v-for="(item,index) in arrList" :key="index">
				<img :src="item.avatar || '../../static/image/bg_img.png'" alt="">
				<view class="bigs">{{item.nickname}}</view>
				<view class="cu-form-group margin-top">
					<checkbox :class="item.checked?'checked':''" :checked="item.checked?true:false" :value="item.friend_id"></checkbox>
				</view>
			</view>
		</checkbox-group>
		<view class="btns" @click="tijiao">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:'',
				checkbox: [{
					value: 'A',
					checked: true,
					id:1
				}, {
					value: 'B',
					checked: true,
					id:2
				}, {
					value: 'C',
					checked: false,
					id:3
				}],
				arrList:[],
				avatar:'',
				nickname:'',
				idList:[]
			}
		},
		onShow(){
			this.$msgchat.initwork();
			this.initData();
		},
		onLoad(option){
			this.group_id = option.group_id;
			this.initData();
		},
		methods: {
			CheckboxChange(e) {
				var items = this.arrList,
					values = e.detail.value;
					this.idList = e.detail.value;
					console.log(values)
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].friend_id == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			//好友列表
			initData(){
				uni.showLoading({
					title: '加载中'
				});
				this.$common.requests('/api/index/makefriendlist',{group_id:this.group_id}).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						for(let i=0;i<res.data.data.length;i++){
							res.data.data[i]['checked'] = false;
							res.data.data[i].friend_id =res.data.data[i].friend_id.toString()
							if(res.data.data[i].avatar != ''){
								res.data.data[i].avatar = this.$common.baseUrl + res.data.data[i].avatar
							}
						}
						this.arrList = res.data.data;
						console.log(this.arrList);
					}
				})
			},
			//提交新建群
			tijiao(){
				let obj = {
					group_id : this.group_id,
					people : this.idList.join(",")
				}
				this.$common.requests('/api/index/addgroupman', obj).then(res => {
					if(res.data.code == 1){
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
					this.$api.msg(res.data.msg);
				})
			}
		}
	}
</script>

<style>
.menus{
	width: 92%;
	margin: 0 auto;
	padding: 25upx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 2upx #EEEEEE;
}
.menus>img:nth-child(1){
	width: 90upx;
	height: 90upx;
	border-radius: 10upx;
}
.qunimg{
	width: 110upx!important;
	height: 110upx!important;
}
.menus>view:nth-child(2){
	width: 75%;
}
.menus>img:nth-child(3){
	width: 30upx;
	height: 30upx;
}
.bigs{
	width: 65%!important;
	font-size: 32upx;
}
.grays{
	color: #B6B5B5;
	font-size: 26upx;
}
.grays1{
	padding-top: 15upx;
}
.btns{
	letter-spacing: 5upx;
	width: 80%;
	text-align: center;
	padding: 20upx 0;
	border-radius: 10upx;
	color: #FFFFFF;
	font-size: 30upx;
	background: #39B54A;
	position: fixed;
	bottom: 100upx;
	left: 10%;
}
.margin-top{
	margin-top: 0!important;
}
.cu-form-group{
	min-height: 0!important;
}
</style>
